<template>
	<!-- 个人中心   用户资料 -->
	<div class="p-info">
		<div class="company-userinfo-head flex">
			<div class="company-userinfo-head-img flexCenter">
				<img :src="imgs1" alt="" v-if="imgs1.length>0"/>
				<img src="../../assets/images/tx.png" alt="" v-else />
			</div>
			<div class="company-userinfo-head-text flexColumn">
				<p class="h99">{{$t('common.company.companytask4')}}</p>
				<p class="h99">{{$t('common.company.companytask5')}}</p>
				<el-upload action="" :before-upload="logoUpload">
					<span class="color1">{{$t('common.company.upload')}}</span>
				</el-upload>
			</div>
		</div>
		<div class="company-userinfo-content">
			<div class="zmlTitle">{{$t('common.leftNav.userinfo')}}</div>
			<div class="company-userinfo-table">
				<table>
					<tr>
						<td class="title">{{$t('common.login.userXName')}}：</td>
						<td><el-input v-model="resource.userName"></el-input></td>
						<td class="title">{{$t('common.company.sex')}}：</td>
						<td>
							<el-select v-model="resource.sex" :placeholder="$t('common.newJob.select')" @change="bindChange" :popper-append-to-body="false">
								<el-option :label="this.$t('common.resume.male')" value="0"> </el-option>
							  <el-option :label="this.$t('common.resume.female')" value="1"> </el-option>
							</el-select>
						</td>
					</tr>
					<tr>
						<td class="title">{{$t('common.company.phone')}}：</td>
						<td>{{resource.phone}}</td>
						<td class="title">{{$t('common.detail.natureIdentity')}}：</td>
						<td>
							<el-select v-model="resource.identityProperties" :placeholder="$t('common.newJob.select')" @change="bindChange" :popper-append-to-body="false">
							    <el-option
							      v-for="item in options"
							      :key="item.value"
							      :label="item.text"
							      :value="item.value">
							    </el-option>
							  </el-select>	
						</td>
					</tr>
					<tr>
						<td></td>
						<td>
							<button class="zmlBtn1" @click="baocun">{{$t('common.newJob.save')}}</button>
							<button class="zmlBtn2" @click="quxiao">{{$t('common.company.cancel')}}</button>
						</td>
						<td></td>
						<td></td>
					</tr>
				</table>
			</div>
		</div>
	</div>
</template>
<script>
import { ajax, showToast, ajaxAdd,showToastSuccess,beforeUpload,getUserInfoData} from '@/utils/js.js';
import { getCurrentInfo,qyNature,updateUserInfo,uploadFile } from '@/services/api.js';
export default{
	data(){
		return{
			options:[],
			resource:{headPicture:''},
			resetData:{},
			headPicture:'',
			imgs1:this.$store.state.userInfo.path,
			imgUrl:this.$store.state.imgUrl
		}
	},
	methods:{
		//logo上传
		logoUpload(file){
			let data = new FormData()
			data.append('file', file)
			const typeList = ["jpg", "png"];
			beforeUpload(file,typeList,3072000,d=>{
				ajax(this,uploadFile,data,res=>{
					this.imgs1 = this.imgUrl+res.data.path
					console.log('this.imgs1',this.imgs1)
					this.resource.headPicture= res.data.path
					showToastSuccess(this,res.msg)
				},err=>{
					showToast(this,err.msg)
				})
				return false
			})
			
		},
		// 下拉框改变时
		bindChange(e){
			console.log(this.value)
		},
		// 保存
		baocun(){
			let resource = this.resource
			console.log(resource)
			if(JSON.stringify(resource) == JSON.stringify(this.resetData)){
				showToast(this,this.$t('common.company.noInfo'))
			}else{
				ajaxAdd(this,updateUserInfo,resource,res=>{
					console.log(res)
					showToast(this,res.msg,1)
					let userInfo = this.$store.state.userInfo
					userInfo.name = resource.userName
					userInfo.path = this.imgs1
					userInfo.sex = resource.sex
					userInfo.identityProperties = resource.identityProperties
					this.$store.dispatch('setUserInfo',userInfo);
				},err=>{
					showToast(this,err.msg,0)
				})
			}
			
		},
		// 取消
		quxiao(){
			console.log(this.resetData)
			this.resource = {...this.resetData}
			this.resetData = {...this.resetData}
		},
		
		content(){
			ajax(this,qyNature,{lxjp:"IDENTITY_PROPERTIES"},res=>{
				console.log(res)
				this.options = res.data
			})
			getUserInfoData(this,userInfo=>{
				console.log('新的用户',userInfo)
				let newData = {
					headPicture:userInfo.path,
					sex:userInfo.sex,
					identityProperties:userInfo.identityProperties,
					phone:userInfo.phone,
					userName:userInfo.name
				}
				this.resource = newData
				this.resetData = {...newData}
				this.imgs1 = userInfo.path
			})
			
    }
		
	},
	mounted() {
		this.content()
	},
	watch:{
		'$i18n.locale'(){
			this.content()
		},
	}
}
</script>
<style lang="scss">
.p-info{
	background-color: #fff;
	padding: 0 30px;
	min-height: 890px;
	.company-userinfo-head{
		padding: 30px 0;
		border-bottom: 1px solid #D1D1D1;
		.company-userinfo-head-img{
			width: 100px;
			height: 100px;
			overflow: hidden;
			background-color: #F5F5F5;
			color: #999;
			img{
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
		.company-userinfo-head-text{
			flex: 1;
			padding: 5px 0;
			padding-left: 20px;
			justify-content: space-between;
			
		}
	}
	.company-userinfo-table{
		width: 100%;
		padding-left: 13px;
		table{
			width: 100%;
			td{
				padding: 6px 0;
			}
			tr{
				.title{
					text-align: right;
				}
				button{
					margin-right: 12px;
					margin-top: 20px;
					border-radius:2px;
				}
				.zmlBtn2{
					border:1px solid rgba(230,226,226,1);
					color: #999;
				}
			}
		}
		input{
			width: 260px;
		}
	}
}
</style>
